<template>
  <div class="leftchild9">
    <header>
      <li>
        <router-link to="/"><span>工作台</span></router-link>
      </li>
      &nbsp;
      <li>/</li>
      &nbsp;
      <li>邮件管理</li>
    </header>
    <main>
      <div class="notice">
        系统检测到<time>SMTP 配置</time>未完善，当收到评论时，无法进行邮件通知。
        <li>
          <router-link to="/system/smtp"><span>点我立即完善</span></router-link>
        </li>
      </div>
      <div class="top">
        <div class="top-top">
          <a-form
            :model="formState"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-item label="发件人：">
              <a-input
                v-model:value="formState.Usename"
                placeholder="请输入发件人"
              />
            </a-form-item>

            <a-form-item label="收件人：">
              <a-input
                v-model:value="formState.email"
                type="textarea"
                placeholder="请输入收件人"
              />
            </a-form-item>

            <a-form-item label="主题：">
              <a-input
                v-model:value="formState.theme"
                type="textarea"
                placeholder="请输入主题"
              />
            </a-form-item>
          </a-form>
        </div>
        <div class="top-bottom">
          <div style="width: 240px">
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit">搜索</a-button>
              <a-button style="margin-left: 10px" @click="resetting"
                >重置</a-button
              >
            </a-form-item>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="m-top">
          <a-popover>
            <template #content>
              <p color="#fff">刷新</p>
            </template>
            <ReloadOutlined @click="error" />
          </a-popover>
        </div>
        <div class="m-middle">
          <a-table
            :columns="columns"
            :data-source="data"
            :row-selection="rowSelection"
          >
            <template>
              <span>111</span>
              <span class="btn2">222</span>
            </template>
          </a-table>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw, UnwrapRef } from 'vue'
interface FormState {
  Usename: string
  theme: string
  email: string
}
import { ReloadOutlined } from '@ant-design/icons-vue'
const columns = [
  {
    title: '发件人',
    dataIndex: 'usename',
    key: 'usename'
  },
  {
    title: '收件人',
    dataIndex: 'email',
    key: 'email'
  },
  {
    title: '主题',
    dataIndex: 'row',
    key: 'row'
  },
  {
    title: '发送时间',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    dataIndex: '操作',
    key: 'address',
    slots: { customRender: 'name' } //绑定插槽
  }
]
interface DataItem {
  key: number
  usename: string
  email: number
  row: string
  children?: DataItem[]
  status: string
}
const data: DataItem[] = [
  // {
  //     key: 1,
  //     usename: 'John Brown sr.',
  //     email: 60,
  //     row: 'New York No. 1 Lake Park',
  //     status: '在线',
  // },
]
const rowSelection = {
  onChange: (
    selectedRowKeys: (string | number)[],
    selectedRows: DataItem[]
  ) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows
    )
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (
    selected: boolean,
    selectedRows: DataItem[],
    changeRows: DataItem[]
  ) => {
    console.log(selected, selectedRows, changeRows)
  }
}

export default defineComponent({
  components: {
    ReloadOutlined
  },
  setup() {
    const formState: UnwrapRef<FormState> = reactive({
      Usename: '',
      theme: '',
      email: ''
    })
    const onSubmit = () => {
      console.log('submit!', toRaw(formState))
    }
    let resetting = () => {
      formState.Usename = ''
      formState.email = ''
      formState.theme = ''
    }
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    const error = () => {}
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      onSubmit,
      formState,
      resetting,
      error,
      data,
      columns,
      rowSelection
    }
  }
})
</script>

<style lang="scss">
.leftchild9 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  header {
    height: 10%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #eae2e2;

    li {
      cursor: pointer;
      color: #999;

      span {
        color: #999;
      }
    }
  }

  main {
    flex-grow: 1;
    overflow-y: scroll;
    .notice {
      width: 97%;
      height: 35px;
      background: #fffbe6;
      border: solid 1px #ffe58f;
      margin: 1.6% auto;
      display: flex;
      align-items: center;
      padding-left: 15px;

      time {
        font-weight: bold;
      }

      li {
        span {
          color: #000;
        }
      }
    }

    .top {
      width: 97%;
      height: 150px;
      background: #fff;
      margin: 2% auto;

      .top-top {
        height: 50%;
        display: flex;
        align-items: center;

        .ant-form {
          display: flex;
          justify-content: space-around;
          margin-left: 25px;

          input {
            width: 200px;
            margin-left: 10px;
          }

          .ant-col {
            margin-right: 10px;
          }
        }

        .ant-select-selector {
          width: 200px;
        }

        .ant-select {
          width: 200px;
        }

        .ant-select-arrow {
          float: right;
        }
      }

      .top-bottom {
        display: flex;
        justify-content: flex-end;
      }
    }

    .middle {
      width: 97%;
      height: 260px;
      background: #fff;
      margin: 3% auto;

      .m-top {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
        cursor: pointer;
      }

      .m-middle {
        height: 84%;
      }
      .btn2 {
        margin-left: 13px;
      }
    }
  }
}
</style>
